<template>
  <div class="app-container">
    <el-form ref="elForm" :disabled="$route.query.isInfo" :model="formData" :rules="rules" size="medium"
      label-width="120px">
      <h2 style="text-align: center">人员培训登记</h2>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item :prop="formData.operTime" :rules="rules.operTime" label="录入日期">
            <el-date-picker v-model="formData.operTime" :disabled="$route.query.isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              :style="{ width: '100%' }" placeholder="请选择录入日期" clearable></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <h4 class="form-header h4">
        <el-button type="primary" plain size="mini" @click="handleAdd">增行</el-button>
        <!-- <el-button type="danger" plain size="mini" @click="handleDele"
          >删行</el-button
        > -->
      </h4>

      <el-table :data="formData.contentList" :border="true" style="width: 100%">
        <el-table-column label="序号" type="index" align="center" />
        <el-table-column min-width="150" label="员工姓名" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.userId`" :rules="rules.userId">
              <UserDialog placeholder="请选择员工姓名" :disabled="$route.query.isEdit" :becomeShow="false" @change="changeUser($event, scope.$index)"
                v-model="scope.row.userId"></UserDialog>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column label="培训开始日期" prop="price" min-width="200" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.startDate`" :rules="rules.startDate">
              <el-date-picker v-model="scope.row.startDate" :disabled="$route.query.isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择培训开始日期" clearable></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="培训结束日期" prop="price" min-width="200" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.endDate`" :rules="rules.endDate">
              <el-date-picker v-model="scope.row.endDate" :disabled="$route.query.isEdit" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                :style="{ width: '100%' }" placeholder="请选择培训结束日期" clearable></el-date-picker>
            </el-form-item>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="录入日期"
          prop="price"
          min-width="200"
          align="center"
        >
          <template slot-scope="scope">
           
          </template>
        </el-table-column> -->
        <el-table-column width="150" label="专业" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.specialize
              ? scope.row.specialize.split(',')
              : []">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="职称" align="center">
          <template slot-scope="scope">
            <div v-for="item in scope.row.professionalLabel
              ? scope.row.professionalLabel.split(',')
              : []">
              {{ item }}
            </div>
          </template>
        </el-table-column>
        <el-table-column width="150" label="培训内容" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.content`" :rules="rules.content">
              <el-input :disabled="$route.query.isEdit" v-model="scope.row.content" placeholder="请输入培训内容"></el-input>
            </el-form-item>
          </template>
        </el-table-column>

        <el-table-column width="150" label="主办单位" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.organ`" :rules="rules.organ">
              <el-input v-model="scope.row.organ" :disabled="$route.query.isEdit" placeholder="请输入主办单位"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column width="150" label="备注" align="center">
          <template slot-scope="scope">
            <el-form-item label-width="0" :prop="`contentList.${scope.$index}.remark`" :rules="rules.remark">
              <el-input v-model="scope.row.remark" placeholder="备注"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column  width="200" label="附件" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="`certItemBos.${scope.$index}.attachmentUrl`"
                  :rules="rules.attachmentUrl"
                >
                  <!-- <FileUpload v-model="scope.row.oss"></FileUpload> -->
                  <FileUpload :isDelete="!$route.query.isInfo" v-model="scope.row.attachmentUrl"></FileUpload>
                </el-form-item>
              </template>
            </el-table-column>
        <el-table-column width="150" label="删除" align="center">
          <template slot-scope="scope">
            <el-button type="danger" plain size="mini" @click="handleDele(scope.$index)">删行</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-col :span="24">
        <el-form-item label-width="0" style="text-align: center; margin-top: 30px">
          <el-button v-if="!$route.query.isInfo" type="primary" @click="submitForm">提交</el-button>
          <el-button :disabled="false" @click="resetForm">返回</el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import {
  cultivateUserRecordAdd,
  updategcultivateUserRecord,
  cultivateUserRecordInfo,
} from "@/api/cultivate/userRecord.js";
export default {
  components: {},
  dicts: ["sys_device_check_type"],
  props: [],
  data() {
    return {
      formData: {
        contentList: [
          {
            userId: undefined,
            userName: undefined,
            sex: undefined,
            age: undefined,
            degree: undefined,
            specialize: undefined,
            professionalLabel: undefined,
            operTime: null,
            startDate: null,
            endDate: null,
            content: undefined,
            organ: undefined,
            remark: undefined,
          },
        ],
      },
      deptOptions: [],
      rules: {
        content: [
          {
            required: true,
            message: "请输入培训内容",
            trigger: "blur",
          },
        ],
        organ: [
          {
            required: true,
            message: "请输入主办单位",
            trigger: "blur",
          },
        ],
        remark: [
          {
            required: false,
            message: "请输入备注",
            trigger: "blur",
          },
        ],
        startDate: [
          {
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        endDate: [
          {
            required: true,
            message: "请选择培训结束日期",
            trigger: "change",
          },
        ],
        operTime: [
          {
            required: true,
            message: "请选择录入日期",
            trigger: "change",
          },
        ],
        userId: [
          {
            required: true,
            message: "请选择员工",
            trigger: "change",
          },
        ],
      },

      deviceOptions: [],
    };
  },
  computed: {},
  created() {
    if (this.$route.query.isEdit || this.$route.query.isInfo) {
      this.getinfo();
    }
  },
  mounted() { },
  methods: {
    handleAdd() {
      this.formData.contentList.push({
        userId: undefined,
        userName: undefined,
        sex: undefined,
        age: undefined,
        degree: undefined,
        specialize: undefined,
        professionalLabel: undefined,
        operTime: null,

        startDate: null,
        endDate: null,
        content: undefined,
        organ: undefined,
        remark: undefined,
      });
    },
    handleDele(e) {
      if (this.formData.contentList.length == 1) return;
      this.formData.contentList.splice(e,1);
    },

    changeUser(e, i) {
      console.log(e, i);
      this.formData.contentList[i].userName = e.nickName;
      this.formData.contentList[i].sex = e.sex;
      this.formData.contentList[i].age = e.age;
      this.formData.contentList[i].degree = e.userDocBaseVo.degree;
      this.formData.contentList[i].specialize = e.userDocProfessionals
        .map((_e) => _e.subjectName)
        .toString();
      this.formData.contentList[i].professionalValue = e.userDocProfessionals
        .map((_e) => _e.professionalValue)
        .toString();
      this.formData.contentList[i].professionalLabel = e.userDocProfessionals
        .map((_e) => _e.professionalLabel)
        .toString();
    },
    getinfo() {
      cultivateUserRecordInfo(this.$route.query.id).then((response) => {
        this.formData = response.data;
        this.formData.operTime = this.formData.contentList[0].operTime
      });
      console.log(this.content);
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          let query = JSON.parse(JSON.stringify(this.formData));
          query.contentList.forEach((item, index) => {
            item.operTime = query.operTime
          })
          if (this.formData.cultivateUserRecordId != undefined) {
            updategcultivateUserRecord(query).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.resetForm();
            });
          } else {
            cultivateUserRecordAdd(query).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.resetForm();
            });
          }
        }
      });
    },
    resetForm() {
      const obj = { path: "./userRecord" };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>
//
<style lang="scss" scoped>
::v-deep .el-form-item {
  margin-top: 20px !important;
}
</style>
